package com.example.medicinebox.ui

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.lifecycle.viewmodel.compose.viewModel
import com.example.medicinebox.model.ClockAtomic
import com.example.medicinebox.ui.screens.MainScreen
import com.example.medicinebox.ui.screens.MbUiState
import com.example.medicinebox.ui.screens.MbViewModel

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MbApp() {
    val mbViewModel: MbViewModel = viewModel(factory = MbViewModel.Factory)
    val uiState by mbViewModel.mbUiState.collectAsState()

    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary
                ),
                title = {
                    Text(
                        text = uiState.appTitle,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis,
                        fontWeight = FontWeight.Bold
                    )
                },
                navigationIcon = {
                    TextButton(onClick = {
                        mbViewModel.setAdjustDialogShow(true)
                    }) {
                        Text("调整阈值")
                    }
                },
                actions = {
                    TextButton(onClick = {
                        mbViewModel.handleCloseAlarm()
                    }) {
                        Text("关闭闹钟")
                    }
                }
            )
        },
        modifier = Modifier.fillMaxSize()
    ) { innerPadding ->
        MainScreen(
            uiState = uiState,
            checked = mbViewModel.checked,
            clockList = mbViewModel.clocks,
            onMedicineDialogShow = { namedIndex ->
                mbViewModel.showMedicineDialog(namedIndex)
            },
            onMedicineDialogClose = { mbViewModel.closeMedicineDialog() },
            onTimePickerShow = { mbViewModel.showTimePicker() },
            onTimePickerClose = { mbViewModel.closeTimePicker() },
            onTimeAdd = { timePickerState ->
                mbViewModel.addClock(
                    timePickerState.hour,
                    timePickerState.minute
                )
            },
            onRemoveClock = { clockAtomic ->
                mbViewModel.removeClock(clockAtomic)
            },
            onChooseBox = { checkedIndex ->
                mbViewModel.handlerChooseBox(checkedIndex)
            },
            medicineNameList = mbViewModel.medicineName,
            onAddMedicineName = { mbViewModel.addMedicineName() },
            medicineNameInput = mbViewModel.medicineNameInput,
            onMedicineNameInput = { input ->
                mbViewModel.handleMedicineNameInput(input)
            },
            modifier = Modifier.padding(innerPadding),
            onAdjustDialogClose = { mbViewModel.setAdjustDialogShow(false) },
            onAdjustDialogConfirm = { tempSlider, humiSlider ->
                mbViewModel.setAdjustDialogShow(false)
                mbViewModel.handleSliderAdjust(tempSlider, humiSlider)
            }
        )
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Preview
@Composable
fun MbAppPreview() {
    val uiState = MbUiState(
        showTimePicker = false,
        showMedicineDialog = false,
        namedIndex = 1,
        appTitle = "智能药箱",
        temp = 32.3f,
        humi = 50,
        showAdjustDialog = false,
    )

    /* 9 种药品名称 */
    val medicineName: List<MutableState<String?>> = List(9) { mutableStateOf("") }

    val clocks = remember { mutableStateListOf<ClockAtomic>() }

    val checked = List(9) { mutableStateOf(false) }

    /* 药品输入框 */
    val medicineNameInput by remember { mutableStateOf("") }


    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary
                ),
                title = {
                    Text(
                        text = uiState.appTitle,
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis,
                        fontWeight = FontWeight.Bold
                    )
                },
                navigationIcon = {
                    TextButton(onClick = {}) {
                        Text("调整阈值")
                    }
                },
                actions = {
                    TextButton(onClick = {}) {
                        Text("关闭闹钟")
                    }
                }
            )
        },
        modifier = Modifier.fillMaxSize()
    ) { innerPadding ->
        MainScreen(
            uiState = uiState,
            checked = checked,
            clockList = clocks,
            onMedicineDialogShow = { },
            onMedicineDialogClose = { },
            onTimePickerShow = { },
            onTimePickerClose = { },
            onTimeAdd = { },
            onRemoveClock = { },
            onChooseBox = { },
            medicineNameList = medicineName,
            onAddMedicineName = { },
            medicineNameInput = medicineNameInput,
            onMedicineNameInput = { },
            modifier = Modifier.padding(innerPadding),
            onAdjustDialogConfirm = { valueA, valueB -> },
            onAdjustDialogClose = { }
        )
    }
}
